<template>
	<div class="box">
		<p><input type="text" placeholder="用户名" v-model="state.user" /></p>
		<p><input type="text" placeholder="密码" v-model="state.pwd" /></p>

		<p><input type="button" value="登录" @click="doLogin" /></p>
	</div>
</template>

<script setup>
import { reactive } from 'vue'; //reactive 是 Vue3 中提供的实现数据响应式的方法
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const state = reactive({
	//reactive监听(对象/数组) ,ref监听简单数据
	user: 'wupeiqi',
	pwd: '123'
});

function doLogin() {
	// 1.向后台发送请求且登录成功
	// 2.返回信息
	const context = {
		routers: ['menu', 'info', 'more', 'mine', 'six', 'admin', 'role', 'user'],
		menus: [
			{
				id: 1,
				title: '权限管理',
				icon: 'User',
				children: [{ name: 'menu', title: '菜单' }, { name: 'role', title: '角色' }, { name: 'user', title: '用户' }]
			},
			{
				id: 2,
				title: 'VIP中心',
				icon: 'Box',
				children: [{ name: 'info', title: '陌陌' }]
			},
			{
				id: 3,
				title: '财务管理',
				icon: 'Setting',
				children: [{ name: 'mine', title: '我的' }, { name: 'six', title: '溜溜' }]
			}
		],
		permissions: {
			user: ['GET', 'DELETE'],
			order: ['GET', 'POST', 'PUT', 'DELETE'],
			'order-detail': ['GET', 'PUT', 'DELETE']
		},
		token: 'd5c618b9-d956-48de-bbb7-2d605522cf46'
	};
	// 3. 保存到vuex
	store.commit('login', context);
	//4. 跳转后台
	router.replace({ name: context.routers[0] });
}
</script>

<style>
.box {
	border: 1px solid #ddd;
	width: 300px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
}
</style>
